<template>
  <el-container class="main">
    <el-aside width="200px">
      <el-menu background-color="#222b45" style="border: 0px " :default-active="store.menuPath" text-color="#fff"
        :router="true" :unique-opened="true">
        <el-sub-menu index="#1">
          <template #title>系统管理</template>
          <el-menu-item index="/dashboard">仪表盘</el-menu-item>
        </el-sub-menu>
        <template v-for="(item, i) in menuItems" :key="i">
          <template v-if="!item.meta?.hidden">
            <el-sub-menu :index="item.path" v-if="item.children">
              <template #title>{{ item.meta?.name }}</template>
              <el-menu-item v-for="(item1, i) in item.children" :key="i" :index="item1.path">{{ item1.meta?.name
              }}</el-menu-item>
            </el-sub-menu>
            <el-menu-item :index="item.path" v-else> {{ item.meta?.name }}</el-menu-item>
          </template>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="padding: 0;">
        <el-menu background-color="#151c31" text-color="#fff" mode="horizontal" :ellipsis="false" :router="true">
          <el-menu-item index="/">LOGO</el-menu-item>
          <div class="flex-grow"></div>
          <el-sub-menu index="2">
            <template #title>
              <el-avatar :size="30" class="avatar" /> <el-text type="info">{{ store.$state.username }}</el-text>
            </template>
            <el-menu-item index="/login">退出</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { useGlobalStore } from "@/store/index.js";
import { useMenu } from "@/api/index.js";
import { ref } from "vue"
const store = useGlobalStore()
const menuItems = ref([])
store.setUsername("管理员")
useMenu((data) => {
  menuItems.value = data
})

</script>

<style>
body {
  padding: 0;
  margin: 0;
}

.main {
  position: absolute;
  height: 100%;
  width: 100%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.flex-grow {
  flex-grow: 1;
}

.el-container {}

.el-header {
  color: #fff;
  margin-left: 200px;
}

.el-main {
  margin-left: 200px;
  height: 100%;
}

.el-aside {
  background: #222b45;
  color: #fff;
  position: absolute;
  height: 100%;
}

.avatar {
  margin-right: 10px;
}
</style>
